<template>
  <view
    class="hb-flex-1 hb-relative"
    @click="chooseFile({ mediaType: 'image' })"
    :style="{
      width,
      height,
    }"
  >
    <view class="hb-absolute hb-left-0 hb-right-0 hb-top-0 hb-bottom-0 hb-z-0">
      <t-image
        :src="bgImgs[bgImgKey]"
        :width="width"
        :height="height"
        border-radius="16rpx"
      ></t-image>
    </view>

    <view
      @click="previewImage(result[0]?.tempFilePath as string)"
      class="hb-absolute hb-left-0 hb-right-0 hb-top-0 hb-bottom-0 hb-z-1"
    >
      <t-image
        v-if="result[0]?.tempFilePath"
        :src="result[0]?.tempFilePath"
        :width="width"
        :height="height"
        border-radius="16rpx"
      ></t-image>
    </view>
    <view
      v-if="result[0]?.progress < 100 || result[0]?.isErr"
      class="hb-absolute hb-left-0 hb-right-0 hb-top-0 hb-bottom-0 hb-flex hb-flex-col hb-justify-center hb-items-center hb-gap-3 hb-z-2"
      style="background: rgba(0, 0, 0, 0.1)"
      @click="reupload(0)"
    >
      <tm-text v-if="result[0]?.isErr" label="上传失败" color="red" :font-size="32"></tm-text>
    </view>
    <view
      v-if="result[0]?.tempFilePath"
      class="hb-absolute hb--right-2 hb--top-3 hb-p-1 hb-flex hb-items-center hb-justify-center hb-z-3"
      @click.stop="handleDelFront"
    >
      <tm-icon color="#f43e08" name="ali-icon icon-guanbi1" :font-size="40"></tm-icon>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { root } from '@/api/apiRoot';
  // import { ocrImageParse } from '@/api/public';
  // import { OcrRequestEnum } from '@/api/public/types';
  import { useUpload } from '@/hooks/file/useUpload';
  // import businessLicense from '@/static/icon/emptyIcon/businessLicense.png';
  // import defaultBg from '@/static/icon/emptyIcon/defaultBg.png';

  const bgImgs = {
    frontOfIDCard: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/frontOfIDCard.png',
    reverseOfIDCard: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/reverseOfIDCard.png',
    businessLicense: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/businessLicense.png',
    // defaultBg,
    registrationCertificate:
      'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/registrationCertificate.png',
  };

  export type BgImgKey =
    | 'frontOfIDCard'
    | 'reverseOfIDCard'
    | 'businessLicense'
    // | 'defaultBg'
    | 'registrationCertificate';

  const props = defineProps({
    bgImgKey: {
      type: String as PropType<BgImgKey>,
      default: 'defaultBg',
    },
    img: {
      type: String,
      default: '',
    },
    mediaId: {
      type: String,
      default: '',
    },
    // uploadUrl: {
    //   type: String,
    //   default: root + 'app/merchant/upload',
    // },
    // request: {
    //   type: String as PropType<OcrRequestEnum>,
    //   default: OcrRequestEnum.bankcard,
    // },
    ocr: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: '299rpx',
    },
    height: {
      type: String,
      default: '180rpx',
    },
  });

  const emits = defineEmits(['update:img', 'update:mediaId', 'ocr-data']);

  const { chooseFile, successResult, delResultItem, result, addResultItem, reupload } = useUpload({
    count: 1,
    fileSize: 2,
  });

  // 上传成功

  watch(
    successResult.value,
    (val) => {
      const filePath = val[0]?.filePath;
      const tempFilePath = val[0]?.tempFilePath;
      const mediaId = val[0]?.mediaId;
      if (filePath == tempFilePath) return;
      if (filePath) {
        // props.ocr &&
        //   ocrImageParse({ imgUrl: filePath, request: props.request }).then((res) => {
        //     emits('ocr-data', res);
        //   });
        emits('update:img', filePath);
        emits('update:mediaId', mediaId);
      }
    },
    { immediate: true, deep: true },
  );

  // 回显

  watch(
    () => props.img,
    (val) => {
      if (val) {
        addResultItem({
          tempFilePath: val,
          filePath: val,
          progress: 100,
          isSuccess: true,
        });
      }
    },
    { deep: true, immediate: true },
  );

  // 预览

  function previewImage(url: string) {
    uni.previewImage({
      current: url,
      urls: [url],
    });
  }

  // 删除

  const handleDelFront = () => {
    delResultItem(0);
    emits('update:img', '');
    emits('update:mediaId', '');
  };
</script>
